'use client'

import React, { createContext, useContext, useState, ReactNode } from 'react'
import { NavigationHeaderProps } from '@/components/NavigationHeader'

interface NavigationContextType {
  navigationProps: NavigationHeaderProps
  setNavigationProps: (props: NavigationHeaderProps) => void
}

const NavigationContext = createContext<NavigationContextType | undefined>(undefined)

export function NavigationProvider({ children }: { children: ReactNode }) {
  const [navigationProps, setNavigationProps] = useState<NavigationHeaderProps>({
    textColor: 'text-white'
  })

  return (
    <NavigationContext.Provider value={{ navigationProps, setNavigationProps }}>
      {children}
    </NavigationContext.Provider>
  )
}

export function useNavigation() {
  const context = useContext(NavigationContext)
  if (context === undefined) {
    throw new Error('useNavigation must be used within a NavigationProvider')
  }
  return context
}
